<template>
  <div class="ureport-container">
    <el-row :gutter="10">
      <el-col :span="8">
        <dl v-for="item in listData">
          <dt>{{item.groupName}}</dt>
          <dd>
            <template v-for="config in item.reportConfigs">
              <p>
                <el-link type="primary" @click="previwTemp(config)">{{config.tmpName}}</el-link>
              </p>
            </template>
          </dd>
        </dl>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {previwTemp} from "@/api/ureport/baseExportTemp";
  import {listReportGroup} from "@/api/ureport/reportGroup";

  export default {
    data() {
      return {
        listData: []
      }
    },
    created() {
      this.getList()
    },
    methods: {
      previwTemp(row) {
        previwTemp(row.tempId).then(e => {
          var open = window.open();
          open.location = e;
        });
      },
      getList() {
        listReportGroup({modelType: 'zulin'}).then(res => {
          this.listData = res.rows
        })
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  .ureport-container {
    padding: 20px;

    dl {
      border: 1px solid #F0F1F5;
      font-size: 12px;
      display: flex;
      padding: 0;

      dt {
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        justify-items: center;
        text-align: center;
        background-color: #F2F2F2;
        width: 80px;
      }

      dd {
        font-size: 16px;

        a {
          color: #4892ec;
        }
      }
    }
  }
</style>
